<script>
import manageMixin from '@/mixins/manageMixin';

export default {
  name: 'Contract',
  mixins: [manageMixin],
};
</script>

<template>
  <div class="contract-container">
    <div class="header">一体杠列表</div>
    <el-table border size="small" stripe :header-cell-style="{ backgroundColor: '#f4f6f8' }" :data="poleList" v-loading="loading" element-loading-text="拼命加载中">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column label="一体杆名称" prop="poleName" align="center"></el-table-column>
      <el-table-column label="一体杆编号" prop="poleNumber" align="center"></el-table-column>
      <el-table-column label="一体杆IP" prop="poleIp" align="center"></el-table-column>
      <el-table-column label="一体杆类型" :formatter="formatterPoleType" align="center"></el-table-column>
      <el-table-column label="安装区域" prop="poleName" align="center"></el-table-column>
      <el-table-column label="运行状态" :formatter="formatterPoleStatus" align="center"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[15, 20, 30, 40]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
  </div>
</template>

<style scoped lang="scss">
.contract-container {
  padding: 15px;
  background-color: #fff;

  .el-table {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
